<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.springframework.org/schema/jdbc">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="layui/css/layui.css"/>
  <script type="text/javascript" src="layui/layui.js"></script>
  <script type="text/html" id="allocate">
    <div style="float:right">
      <button class="layui-btn layui-btn-sm" lay-event="insert"><i
              class="layui-icon">&#xe654;</i>新增</button>
      <button class="layui-btn layui-btn-sm" lay-event="deleteTABusiness">批量删除</button>
    </div>
      <div class="layui-inline" style="position: relative;left: 30px;">
        <label class="layui-form-label" style="width: 90px">交易日期</label>
        <div class="layui-input-inline">
          <input type="text" class="layui-input" id="businessTime" name="businessTime" placeholder="交易日期">
        </div>
      </div>
    <div class="layui-inline" style="position: relative;left: 30px;">
     <label class="layui-form-label" style="width: 90px">交易状态</label>
      <div class="layui-input-inline">
        <select name="businessState" id="businessState" class="layui-input">
          <option value="0"></option>
          <option value="1">已结算</option>
          <option value="2">未结算</option>
        </select>
      </div>
    </div>
    <div class="layui-inline"style="position: relative;left: 30px;" >
      <label class="layui-form-label" style="width: 90px">交易类型</label>
      <div class="layui-input-inline">
        <select id="businessType" name="businessType" class="layui-input">
          <option value="0"></option>
          <option value="1">申购</option>
          <option value="2">赎回</option>
          <option value="3">认购</option>
        </select>
      </div>
    </div>
    <div class="layui-inline layui-show-xs-block">
      <button class="layui-btn layui-btn-primary" lay-event="search" lay-submit="search" lay-filter="search"><i class="layui-icon">&#xe615;</i>搜索</button>
    </div>

  </script>
  <script type="text/javascript">
    layui.use(['table','form','laydate', 'layer','tableSelect'], function(){
      var table = layui.table;//得到layui 的table组件
      var $=layui.jquery;
      var form=layui.form;
      var laydate = layui.laydate;
      var layer = layui.layer;
      var tableSelect = layui.tableSelect;
      //表格的渲染  给表格加样式 加数据
      table.render({
        //指定原始 table 容器的选择器或 DOM，方法渲染方式必填
        elem: '#MoneyAllocate',
        id: 'MoneyAllocate',
        //url 表格的数据来源  从数据库查询
        url:'selectTABusiness',
        toolbar: '#allocate',
        page: true,
        height:'full-20',
        limits:[5,8,10,15],
        cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        cols: [[
          {field:'taId', title: 'TA交易id', sort: true}
          ,{field:'fundId', title: '基金编号',sort: true} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
          ,{field:'cashId', title: '现金ID', sort: true}
          ,{field:'businessTime', title: '交易日期', sort: true}
          ,{field:'businessNum', title: '数量', sort: true}
          ,{field:'businessEndTime', title: '结算日期', sort: true}
          ,{field:'totalMoney', title: '总金额', sort: true}
          ,{field:'realityMoney', title: '实际金额', sort: true}
          ,{field:'businessPrice', title: '单价', sort: true}
          ,{field:'businessMoney', title: '费用', sort: true}
          ,{field:'agencies', title: '代销机构',templet:function (item){
              if (item.agencies == 1){
                return '建设银行'
              }else if (item.agencies == 2){
                return '工商银行'
              }else if (item.agencies == 3) {
                return '农业银行'
              }
            }}
          ,{field:'businessType', title: '交易类型',templet:function (item){
              if (item.businessType == 1){
                return '认购'
              }else if (item.businessType == 2){
                return '申购'
              }else if (item.businessType == 3) {
                return '赎回'
              }
            }}
          ,{field:'moneyAllocateBeiZhu', title: '备注', sort: true,hide:true}

          ,{field:'businessState', title: '交易状态',templet:function (item){
              if (item.businessState == 1){
                return '已结算'
              }else if (item.businessState == 2) {
                return '未结算'
              }
              }}
          ,{fixed: 'right', width: 165, align:'center', toolbar: '#cashDemo'}
        ]]
      });

      table.on('toolbar(MoneyAllocate)',function (obj) {
        //根据事件对象 来判定点击的是哪一个案例
        if(obj.event=='insert'){
          layer.open({
            type:1,
            area:['1000px','550px'],
            content: $("#MoneyAllocateAdd")
          });
        }else if(obj.event=='deleteTABusiness'){

        }else if(obj.event=='search'){
          var businessTime=$('#businessTime').val();
          var businessType=$('#businessType').val();
          var businessState=$('#businessState').val();
          table.reload('MoneyAllocate', {
            method: 'get',
            url:'selectTABusiness',
            page: {
              curr: 1
            },
            where:{
              'businessTime':businessTime,
              'businessType':businessType,
              'businessState':businessState
            }
          });
          laydate.render({
            elem:'#MoneyAllocate'
          });
        }
      });
      //给增加的form绑定提交事件
      form.on('submit(MoneyAllocateForm)',function () {
        //发送ajax请求到 服务器，
        //得到表单的所有数据
        var formData= form.val("MoneyAllocateForm");
        $.post(
                "insertTABusiness ",
                formData,
                function(msg) {
                  //重新刷新表格
                  //给予提示信息，增加成功
                  alert(msg);

                });

      });

      /*修改*/
      table.on('tool(MoneyAllocate)',function (obj) {
        switch (obj.event) {
          case "edit":

            //得到选中行的数据
            var data=obj.data;
            alert(data)
            //JSON.stringify(data)  拼接成JSON格式的字符串
            var userObj=$.parseJSON(JSON.stringify(data));
            //弹出一个修改的窗口
                  alert(userObj.TAId);
            form.val("moneyAllocateUpdateFrom",userObj);
            layer.open({
              type:1, //iframe 内嵌窗口
              area:['1000px','550px'],
              content: $("#moneyAllocateUpdateContent")
            });

            break;
          case "del":
            layer.confirm('确定要删除吗？',function (index){
              layer.close(index);
              var data=obj.data;
              $.ajax({
                type: "DELETE",
                url: "deleteTABusiness",
                data: "taId="+data.taId,
                success: function(msg){
                  //重新刷新表格
                  table.reload('MoneyAllocate');
                }
              });
            });
            break;
        }
      });



      //给修改的form绑定提交事件
      form.on('submit(moneyAllocateUpdateFrom)',function () {
        //发送ajax请求到 服务器，
        //得到表单的所有数据
        var formData= form.val("moneyAllocateUpdateFrom");
        $.post(
                "updateTABusiness",
                formData,
                function(msg) {
                  //重新刷新表格
                  //给予提示信息，增加成功
                  alert(msg);

                });
      });
      laydate.render({
        elem: '#allocateDate',
      });
      laydate.render({
        elem: '#test1',
      });
      laydate.render({
        elem: '#test2',
      });
      laydate.render({
        elem: '#test3',
      });
      laydate.render({
        elem: '#test4',
      });
      tableSelect.render({
        elem:'#accounName',
        checkedKey:'accounName',
        table:{
          url:'pageCash',
          cellMinWidth: 60,
          cols:[
            [   {type:'radio'},
              {field:'cashId',title:'现金Id',width:200},
              {field: 'accounName',title:'现金名称',width: 200},
            ]
          ]
        },
        done:function (elem,data) {
          //elem:返回之前input对象；data:表格返回的选中的数据 []
          var newJson=[];
          //遍历选中的数据
          $.each(data.data,function (index,item) {
            newJson.push(item);
            $("#cashId").val(item.cashId);
            $("#accounName").val(item.accounName);
          });
          /*elem.val(newJson.join(","));*/ //给输入框里显示的值赋值
        }
      });
    });
  </script>
</head>
<body>



<table id="MoneyAllocate" lay-filter="MoneyAllocate"></table>
<!--表格最后一列的操作按钮的工具栏-->
<div style="display: none;" id="cashDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i
          class="layui-icon">&#xe642;</i>编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
          class="layui-icon">&#xe640;</i>删除</a>

</div>
<!--增加-->
<div id="MoneyAllocateAdd"
     style="display: none; height: 100%; width: 950px; text-align: center; ">
  <!--form表单 lay-filter 绑定事件 若有多个form 筛选作用  background-color: #ffff00; background-color: #0a6aa1;-->
  <form id="MoneyAllocateForm" lay-filter="MoneyAllocateForm"
        class="layui-form layui-form-pane"
        style="margin: 30px auto; display: inline-block; width:100%;">
    <div style=" Float: left; width: 40%;margin-left:10%" >

      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">现金ID</label>
        <div class="layui-input-inline">
          <input type="text" name="accounName" id="accounName" lay-verify="required"
                 autocomplete="off" placeholder="现金ID " class="layui-input">
          <input type="hidden" name="cashId"  id="cashId">
        </div>
      </div>

      <div class="layui-form-item" style="text-align: center;">
        <!--标签-->
        <label class="layui-form-label">数量</label>
        <div class="layui-input-inline">
          <input type="text" name="businessNum" lay-verify="required"
                 autocomplete="off" placeholder="数量" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">交易类型</label>
          <div class="layui-input-inline">
            <select name="businessType" class="layui-input">
              <option value=""></option>
              <option value="1">认购</option>
              <option value="2">申购</option>
              <option value="3">赎回</option>
            </select>
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">代销机构</label>
        <div class="layui-input-inline">
          <select name="agencies" class="layui-input">
            <option value=""></option>
            <option value="1">建设银行</option>
            <option value="2">工商银行</option>
            <option value="3">农业银行</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">交易日期</label>
        <div class="layui-input-inline">
          <input type="text" name="businessTime" class="layui-input" id="test1" placeholder="交易日期">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">结算日期</label>
        <div class="layui-input-inline">
          <input type="text" name="businessEndTime" class="layui-input" id="test2" placeholder="结算日期">
        </div>
      </div>
    </div>
    <!--background-color: #007DDB;-->
    <div style=" Float: left; width: 40%; margin-left:10%">

      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">费用</label>
        <div class="layui-input-inline">
          <input type="text" name="businessMoney" lay-verify="required"
                 autocomplete="off" placeholder="费用" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">单价</label>
        <div class="layui-input-inline">
          <input type="text" name="businessPrice" lay-verify="required"
                 autocomplete="off" placeholder="单价" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">总金额</label>
        <div class="layui-input-inline">
          <input type="text" name="totalMoney" lay-verify="required"
                 autocomplete="off" placeholder="总金额" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">实际金额</label>
        <div class="layui-input-inline">
          <input type="text" name="realityMoney" lay-verify="required"
                 autocomplete="off" placeholder="实际金额" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">交易状态</label>
        <div class="layui-input-inline">
          <input type="radio" name="businessState" value="1" size="20px"  >已结算
          <input type="radio" name="businessState" value="2"  checked="checked">未结算
        </div>
      </div>
    </div>
    <div style="position: relative; clear: both;">
      <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
      <button class="layui-btn" lay-submit="" lay-filter="addsubmit">
        <i class="layui-icon">&#x1005;</i>添加
      </button>
      <button class="layui-btn layui-bg-red cancel" type="button">
        <i class="layui-icon">&#x1006;</i>取消
      </button>
    </div>
  </form>
</div>
<!-- 修改-->
<div id="moneyAllocateUpdateContent" style="display: none; height: 100%; height: 100%; text-align: center;">
  <!--form表单 lay-filter 绑定事件 若有多个form 筛选作用 background-color: #ffff00; background-color: #0a6aa1;-->
  <form id="moneyAllocateUpdateFrom" lay-filter="moneyAllocateUpdateFrom"
        class="layui-form layui-form-pane"
        style="margin: 30px auto; display: inline-block; width:100%;">
    <div style=" Float: left; width: 40%; margin-left:10%">

      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">现金ID</label>
        <div class="layui-input-inline">
          <input type="text" name="cashId" lay-verify="required"
                 autocomplete="off" placeholder="现金ID " class="layui-input">
        </div>
      </div>

      <div class="layui-form-item" style="text-align: center;">
        <!--标签-->
        <label class="layui-form-label">数量</label>
        <div class="layui-input-inline">
          <input type="text" name="businessNum" lay-verify="required"
                 autocomplete="off" placeholder="数量" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">交易类型</label>
        <div class="layui-input-inline">
          <select name="businessType" class="layui-input">
            <option value=""></option>
            <option value="1">认购</option>
            <option value="2">申购</option>
            <option value="3">赎回</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">交易日期</label>
        <div class="layui-input-inline">
          <input type="text" name="businessTime" class="layui-input" id="test3" placeholder="交易日期">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">结算日期</label>
        <div class="layui-input-inline">
          <input type="text" name="businessEndTime" class="layui-input" id="test4" placeholder="结算日期">
        </div>
      </div>
    </div>
    <!--background-color: #007DDB;-->
    <div style=" Float: left; width: 40%; margin-left:10%">
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">费用</label>
        <div class="layui-input-inline">
          <input type="text" name="businessMoney" lay-verify="required"
                 autocomplete="off" placeholder="费用" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">总金额</label>
        <div class="layui-input-inline">
          <input type="text" name="totalMoney" lay-verify="required"
                 autocomplete="off" placeholder="总金额" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">实际金额</label>
        <div class="layui-input-inline">
          <input type="text" name="realityMoney" lay-verify="required"
                 autocomplete="off" placeholder="实际金额" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">交易状态</label>
        <div class="layui-input-inline">
          <input type="radio" name="businessState" value="1" size="20px"  >已结算
          <input type="radio" name="businessState" value="2"  checked="checked">未结算
        </div>
      </div>
    </div>
    <div style="position: relative; clear: both;">
      <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
      <button class="layui-btn" lay-submit="" lay-filter="addsubmit">
        <i class="layui-icon">&#x1005;</i>添加
      </button>
      <button class="layui-btn layui-bg-red cancel" type="button">
        <i class="layui-icon">&#x1006;</i>取消
      </button>
    </div>
  </form>
</div>
</body>




</html>